<extend name="desktop_default/template/base_index2" />

<block name="area_header">

	<style type="text/css">
		body{background: #F5F5F5}
	</style>
</block>

<block name="area_body">
	<include file="desktop_default/width/right" />
	<include file="desktop_default/width/top"/>
	<div class="container">
		{:W('Partials/nav_group')}
	</div><br>

    <include file="desktop_default/partial/usercenter_top"/>

	<div class="div_main shop-container am-cf">
		<div class="div_left" >
			<include file="desktop_default/width/list"/>
		</div>
		<div class="div_right" >
			<div class="title">收货地址</div>
			<div class="address am-text-center">
				<a href="JavaScript:addAddress();">
                    <i id="divcount" class="am-icon-plus-square-o"></i>
                    添加新地址
                </a>
			</div >
			<volist name="address" id="vo">
				<div class="address J_address_{$vo['id']}"  data-detail-info="{$vo.detailinfo}" data-postal-code="{$vo.postal_code}"  data-idcard="{$vo.id_card}" data-contactname="{$vo.contactname}" data-mobile="{$vo.mobile}"  data-area-id="{$vo.areaid}" data-city-id="{$vo.cityid}" data-province-id="{$vo.provinceid}"
                     data-area="{$vo.area}" data-city="{$vo.city}" data-province="{$vo.province}">
                    <eq name="vo['id']" value="$default_address">
                    <i class="am-icon-map-pin">默认</i>
                    </eq>
					{$vo['contactname']} <small class="am-margin-left-sm"><i class="am-icon-credit-card am-margin-right-sm"></i>{:substr_replace($vo['id_card'],"****",4,10)}</small>
                    <div class="am-margin-top-sm am-link-muted ">
                        {:($vo['mobile'])}<br>{$vo['province']} {$vo['city']} {$vo['area']}<br/> {$vo['detailinfo']}
                    </div>
                    <div class="am-margin-top-sm  am-text-right">
                        <a href="javascript:editAddress({$vo['id']});">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;
					    <a class="confirm ajax-get" data-confirm-text="确定删除此地址?" href="{:U('Shop/Address/delete',array('id'=>$vo['id']))}" >删除</a>&nbsp;&nbsp;&nbsp;&nbsp;

                        <neq name="vo['id']" value="$default_address">
                            <a style="color: green;" href="{:U('Shop/User/setdefault',array('id'=>$vo['id']))}">设为默认</a>
                            </neq>
				    </div>
                </div>
                <input type="button" style="display: none;" id="show"  data-am-modal="{target: '#doc-modal-2', closeViaDimmer: 0, width: 500, height: 355}"/>
			</volist>



		</div>
	</div>
    <!-- 收货地址新增 -->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="addressModel">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">使用新地址
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div style="padding-top: 12px;" class="am-modal-bd">
                <form class="address-form" method="post">
                    <input type="hidden" name="province" class="province"   />
                    <input type="hidden" name="city" class="city"   />
                    <input type="hidden" name="area" class="area"  />
                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">所在地区<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <select name="provinceid" style="width: 120px;padding:5px;" class="am-form-field am-fl" id="province">
                                <option value="">=选择省份=</option>
                                <volist name="province" id="vo">
                                    <option value="{$vo.provinceid}">{$vo.province}</option>
                                </volist>
                            </select>
                            <select name="cityid" style="width: 120px;padding:5px;"  class="am-hide am-form-field am-fl" id="city"></select>
                            <select name="areaid" style="width: 120px;padding:5px;" class="am-hide am-form-field am-fl" id="area"></select>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">详细地址<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <textarea rows="3" class="J_detailinfo" name="detailinfo" style="width: 100%" placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码，楼层和房间号等信息"></textarea>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">邮政编码</label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <input type="text" name="postal_code" class=" am-form-field J_postal_code" placeholder="如您不清楚邮递区号，请填写000000" />
                        </div>

                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">收件人<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <input type="text"  name="contactname" class=" am-form-field J_contactname"  placeholder="长度不超过25个字符" />
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">收件人身份证号<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <input type="text" name="id_card" class=" am-form-field  J_id_card"  placeholder="过海关时需要，请填写正确的身份证号!" />
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">联系电话<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <input type="text" name="mobile" class=" am-form-field J_mobile"  placeholder="长度不超过25个字符" />
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">&nbsp;</label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <label type="checkbox">
                                <input type="checkbox" class="J_default_address" value="1" name="default" />设为默认地址</label>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">&nbsp;</label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <a target-form="address-form" href="{:U('Shop/Address/add')}" class="ajax-post am-btn am-btn-sm am-btn-primary J_add_address"><I class="am-icon-save am-margin-right-sm"></I>保存</a>
                            <a target-form="address-form" href="{:U('Shop/Address/edit')}" class="ajax-post am-btn am-btn-sm am-btn-primary am-hide J_edit_address"><I class="am-icon-save am-margin-right-sm"></I>保存</a>

                        </div>
                    </div>


                </form>
            </div>
        </div>
    </div>


	 <include file="desktop_default/width/floor" />

</block>

<block name="area_footer">

    <script type="text/javascript">
        function addAddress() {
            $(".J_mobile").val('');
            $(".J_detailinfo").val('');
            $(".J_contactname").val('');
            $(".J_id_card").val('');
            $(".J_postal_code").val('');

            $(".J_edit_address").addClass("am-hide");
            $(".J_add_address").removeClass("am-hide");
            $("#addressModel").modal();
        }
        function editAddress(addr_id){
            var $address = $(".J_address_"+addr_id);
            console.log($address);
            var mobile = $address.data("mobile");
            var detailinfo = $address.data("detail-info");
            var contactname = $address.data("contactname");
            var idcard = $address.data("idcard");
            var postal_code = $address.data("postal-code");
            console.log(mobile,detailinfo,contactname,postal_code);
            $(".J_mobile").val(mobile);
            $(".J_detailinfo").val(detailinfo);
            $(".J_contactname").val(contactname);
            $(".J_id_card").val(idcard);
            $(".J_postal_code").val(postal_code);

            if({$user.default_address} == addr_id){
                $(".J_default_address").attr("checked", true);
            }

            $(".J_edit_address").removeClass("am-hide");
            $(".J_add_address").addClass("am-hide");
            $("#addressModel").modal();
        }
    </script>
<script type="text/javascript">
        function appendToArea(data){
            $("#area").removeClass("txt-gray");
            var area = $("#area");
            area.empty();
            if(!data){
                area.addClass("am-hide");
                return ;
            }
            if(data.length > 0){
                area.removeClass("am-hide");
            }
            for(var i=0;i<data.length;i++){
                if(i==0){
                    $(".area").val(data[i].area);
                }
                var ele = $("<option></option>");
                ele.text(data[i].area).attr("value",data[i].areaid).appendTo(area);
            }
        }
        function appendToCity(data){
            var city = $("#city");
            city.empty();
            if(!data){
                city.addClass("am-hide");
                return ;
            }
            if(data.length > 0){
                city.removeClass("am-hide");
            }
            for(var i in data){
                var ele = $("<option></option>");
                ele.text(data[i].city).attr("value",data[i].cityid).appendTo(city);
            }
        }
        $(function(){
            $(".order-confim .js_cal").click(function(){
                calDiscount();
            });
            $("#province").change(function(){
                var provinceID = $("#province").val();
                console.log(provinceID);
                var province = $("#province").find("option:selected").text();
                $(".province").val(province);
                if(provinceID){
                    $.post("{:U('Tool/City/getCitys')}",{provinceid:provinceID}).done(function(data){
                        console.log(data);
                        if(data.status){
                            appendToCity(data.info);
                        }else{

                        }
                    });
                }
            });
            $("#city").change(function(){
                $("#city").removeClass("txt-gray");
                var cityID = $("#city").val();
                if(cityID){

                    var city = $("#city").find("option:selected").text();
                    $(".city").val(city);

                    $.post("{:U('Tool/City/getArea')}",{cityid:cityID},function(data){

                        if(data.status){
                            appendToArea(data.info);
                        }else{

                        }
                        $("#pcaloading").hide();
                    });
                }
            });

            $("#area").change(function(){
                var area = $("#area").find("option:selected").text();
                $(".area").val(area);
            });

	});
</script>
</block>